<template>
    <div class="bankadd_content">
        <van-tabs v-model="active">
          <van-tab title="通过原密码">
            <div class="bankadd_info box" v-if="active==0">
                <div class="input_div box">
                    <van-cell-group>
                      <van-field v-model="form.origin_password"
                        label="原密码"
                        type="password"
                        placeholder="请输入原密码" />
                    </van-cell-group>

                    <van-cell-group>
                      <van-field v-model="form.password"
                        label="新密码"
                        type="password"
                        placeholder="请输入新密码" />
                    </van-cell-group>

                    <van-cell-group>
                      <van-field v-model="form.conform_password" type="password" label="确认密码" placeholder="请再次输入密码" />
                    </van-cell-group>

                </div>

                <div class="btns_div box">
                    <button class="save_btn" @click="onSaveByOrigin()" style="background-color: #d64532;">保存</button>
                </div>
            </div>

          </van-tab>
          <van-tab title="通过手机">
            <div class="bankadd_info box" v-if="active==1">
                <div class="input_div box">
                    <van-cell-group>
                      <van-field v-model="form.phone"
                        label="手机号"
                        type="tel"
                        disabled
                        placeholder="请输入手机号" />
                    </van-cell-group>
                    <van-cell-group>
                        <van-field
                          v-model="form.code"
                          center
                          clearable
                          label="验证码"
                          type="tel"
                          placeholder="请输入验证码"
                        >
                          <template #button>
                            <van-button @click="sendCode" size="small" type="primary" style="background: #d64532;border-color: #d64532;" :disabled="disabled" >{{text}}</van-button>
                          </template>
                        </van-field>
                    </van-cell-group>
                    <van-cell-group>
                      <van-field v-model="form.password"
                        label="密码"
                        type="password"
                        placeholder="请输入密码" />
                    </van-cell-group>

                    <van-cell-group>
                      <van-field v-model="form.conform_password" type="password" label="确认密码" placeholder="请再次输入密码" />
                    </van-cell-group>

                </div>

                <div class="btns_div box">
                    <button class="save_btn" @click="onSave()" style="background-color: #d64532;">保存</button>
                </div>
            </div>
          </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import { Toast } from 'vant';
import { sendCode } from "@/api/user"
import { settingPassword, settingPasswordByOrigin } from "@/api/setting"
import Vue from 'vue'
import { Tab, Tabs,Field, CellGroup,Button } from 'vant';

Vue.use(Field).use(CellGroup).use(Tab).use(Tabs).use(Button)
export default {
    name: 'bankcarAdd',
    data () {
        return {
            active: 0,
            disabled: false,
            form:{
                storeId: 0,
                phone: '',
                code: '',
                origin_password: '',
                password: '',
                conform_password: '',
                handlerType: 'setpwd'
            },
            text: '获取验证码'
        }
    },
    methods: {
        sendCode() {
            const toast = Toast.loading({
              duration: 0,
              message: '短信发送中...',
            });
            const obj = {
                storeId: this.form.storeId,
                phone: this.form.phone,
                handlerType: this.form.handlerType
            }
            sendCode(obj).then(res => {
                toast.clear()
                if (res.code === 20000) {
                    Toast.success({message: '发送成功', duration: 2000})
                    this.waitAgain()
                } else {
                    Toast.fail({message: res.info, duration: 2000})
                }
            })
        },
        waitAgain() {
            let code = 60
            const that = this
            const id = setInterval(function() {
                that.disabled = true
                that.text = `${--code}s后再试`
                if (code === 1) {
                    that.text = "获取验证码"
                    that.disabled = false
                    clearTimeout(id)
                }
            }, 1000)
        },
        onSave() {
            if (this.form.password !== this.form.conform_password) {
                Toast.fail({message: '两次密码不一致', duration: 2000})
                return
            }
            settingPassword(this.form).then(res => {
                if (res.code === 20000) {
                    Toast.success({message: '设置成功', duration: 2000})
                    this.$router.go(-1);
                } else {
                    Toast.fail({message: res.info, duration: 2000})
                }
            })
        },
        onSaveByOrigin() {
            if (this.form.password !== this.form.conform_password) {
                Toast.fail({message: '两次密码不一致', duration: 2000})
                return
            }
            settingPasswordByOrigin(this.form).then(res => {
                if (res.code === 20000) {
                    Toast.success({message: '设置成功', duration: 2000})
                    this.$router.go(-1);
                } else {
                    Toast.fail({message: res.info, duration: 2000})
                }
            })
        }
    },
    activated(){
      this.active = 0
      this.form.phone = this.$store.state.userInfo.phone
      this.form.code = ''
      this.form.origin_password = ''
      this.form.password = ''
      this.form.conform_password = ''
      this.form.storeId = this.$store.state.userInfo.store_id
    },
}
</script>

<style lang="stylus" scoped>
    .van-switch--on
        background-color red
    .bankadd_content
        width 100%
        height 100vh
        overflow hidden
        .bankadd_info
            width 100%
            overflow hidden
            .btns_div
                width 100%
                overflow hidden
                padding 0 .3rem
                button
                    width 100%
                    border: 1px solid #d64532
                    background: #d64532
                    line-height .9rem
                    height .9rem
                    font-size .30rem
                    color #fff
                    border-radius .9rem
                    display block
                    text-align center
                    margin-top .6rem
</style>
